<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色列表</title>
    <#include "/layout/css.html"/>
    <link rel="stylesheet" href="${basePath}/ztree/css/zTreeStyle/zTreeStyle.css">
</head>
<body class="body">

<!-- 工具集 -->
<!-- <div class="my-btn-box"> -->
<!--     <form class="layui-form" action="" id="searchWhereForm"  onsubmit="return false"> -->
<!-- 	    <span class="fl"> -->
<!-- 	        <span class="layui-form-label">搜索条件：</span> -->
<!-- 	        <div class="layui-input-inline"> -->
<!-- 				<input type="text" name="name" placeholder="请输入角色名" class="layui-input"> -->
<!-- 			</div> -->
<!-- 			<div class="layui-input-inline"> -->
<!-- 				<input type="text" name="roleCode"  placeholder="请输入角色code" class="layui-input"> -->
<!-- 			</div> -->
<!-- 	        <button class="layui-btn mgl-20" id="btn-search">查询</button> -->
<!-- 	    </span> -->
<!--     </form> -->
<!-- </div> -->
<span class="fl">
	<button class="layui-btn mgl-20" id="btn-add">添加菜单</button>
	<button class="layui-btn mgl-20" id="btn-add-byButton">添加按钮</button>
	
	<button class="layui-btn mgl-20" id="btn-edit">编辑</button>
	<button class="layui-btn mgl-20" onclick="getCheckId()" id="btn-del">删除</button>
</span>
<hr>
<!-- 表格 -->
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
<#include "/layout/js.html"/>
<script type="text/javascript" src="${basePath}/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${basePath}/ztree/js/jquery.ztree.excheck.js"></script>
<SCRIPT type="text/javascript">
		var setting = {
				check: {
					enable: true,
					chkStyle: "radio",
					radioType: "all",
					autoCheckTrigger: true
				},
			data: {
				simpleData: {
					enable: true
				}
			}
		};
		var zNodes =[
			{ id:1, pId:0, name:"随意勾选 1", open:true, checked:true},
			{ id:11, pId:1, name:"随意勾选 1-1", open:true},
			{ id:111, pId:11, name:"随意勾选 1-1-1"},
			{ id:112, pId:11, name:"随意勾选 1-1-2"},
			{ id:12, pId:1, name:"随意勾选 1-2", open:true},
			{ id:121, pId:12, name:"随意勾选 1-2-1"},
			{ id:122, pId:12, name:"随意勾选 1-2-2"},
			{ id:2, pId:0, name:"随意勾选 2", open:true},
			{ id:21, pId:2, name:"随意勾选 2-1"},
			{ id:22, pId:2, name:"随意勾选 2-2", open:true},
			{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
			{ id:222, pId:22, name:"随意勾选 2-2-2"},
			{ id:23, pId:2, name:"随意勾选 2-3"}
		];
		function initZtree() {
			authManagerHttp({url:"/menu/listData",data:{"sysMenuId":"${systemId!}"}},{all:function(data){
        		if(data.isOk){
        			var zNodes =new Array();
        			for (var i=0;i<data.data.records.length;i++)
        			{	
        				var zNode = new Object();
        				zNode.id=data.data.records[i].sysMenuId;
        				zNode.pId=data.data.records[i].parentId;
        				zNode.name=data.data.records[i].name;
        				zNode.open=true;
        				zNodes[i]=zNode;
        			}
        			console.log(zNodes);
        			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
            	}else{
            		layer.msg(data.message,{time: 3000});
            	}
        	}})
		}
			
        	
			
		function getCheckId(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true);
			console.log(nodes);
			if (nodes.length != 1) {
				layer.msg("请选择一个节点"); 
				return null;
			}
			return nodes[0].id;
		}
		
		function addOrEditData(dataId,menuType){
			menuType = isNullGetDef(menuType,'1');
        	dataId = isNullGetDef(dataId,'');
        	
        	
        	
        	var title = "添加";
        	if(isNotNull(dataId)){
        		title = "编辑";
        	}
        	
        	openWindow({"title":title,"url":"/menu/addOrEdit?systemId=${systemId!}&dataId="+dataId+"&menuType="+menuType},function(){initZtree()});
        }
		
		$('#btn-edit').on('click', function(){
			var checkId = getCheckId();
			if(isNull(checkId)){
				return;
			}
			addOrEditData(checkId,null);
		});
		$('#btn-add').on('click', function(){
			addOrEditData(null,null);
		});
		$('#btn-add-byButton').on('click', function(){
			addOrEditData(null,2);
		});
		
		
		function delData(dataId){
        	authManagerHttp({url:"/menu/delData",data:{"dataId":dataId}},{success:function(data){
        		console.log(data);
        		initZtree()
        	}})
        }
		
		$('#btn-del').on('click', function(){
			var checkId = getCheckId();
			if(isNull(checkId)){
				return;
			}
			delData(checkId);
		});
		
		$(document).ready(function(){
			initZtree();			
		});
	</SCRIPT>
</body>
</html>